<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="学期" prop="semeId">
        <el-select v-model="queryParams.semeId" placeholder="请选择学期" :style="{width: '300px'}" @change="getSemesterDeptInfo()">
          <el-option v-for="(item, index) in semeOptions" :key="index" :label="item.value"
                     :value="item.key" :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="12">
      <!--   左侧   -->
      <el-col :lg="15">
        <el-card>
          <div slot="header">
            <span>数据统计</span>
          </div>
          <el-row v-loading="loadingDeptData">
            <el-col :span="8">
              <div class="countCard">
                <div>{{semeInfo.applyCount}}</div>
                <div>已报名人数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="countCard">
                <div>{{semeInfo.checkedCount}}</div>
                <div>已审核人数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="countCard">
                <div>{{semeInfo.groupUserCount}}</div>
                <div>已分组人数</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <bar-chart ref="barChart"
                     :values="semeInfo.deptApplyData.applyCountList"
                     :category="semeInfo.deptApplyData.deptNameList"
                     v-loading="loadingDeptData"
          />
        </el-card>
      </el-col>
      <el-col :lg="9">
        <el-row>
          <el-card style="text-align: center">
            <div>
              <div style="font-size: 20px;">
                <i class="el-icon-s-check"></i>
              </div>
            </div>
            <div>
              注册人数：{{semeInfo.deptRegisterCount}}
            </div>
          </el-card>
        </el-row>
        <el-row>
          <el-card>
            <div slot="header">
              <span>操作流程说明</span>
            </div>
            <div class="opt-list">
              <div>1.党校 添加一个新的学期</div>
              <el-divider></el-divider>
              <div>2.分党校 填写联系人信息</div>
              <el-divider></el-divider>
              <div>3.学员 注册报名</div>
              <el-divider></el-divider>
              <div>4.分党校 审核报名信息</div>
              <el-divider></el-divider>
              <div>5.党校 分配座位</div>
              <el-divider></el-divider>
              <div>6.分党校 录入考核与成绩信息</div>
              <el-divider></el-divider>
              <div>7.学员 填写个人小结</div>
              <el-divider></el-divider>
              <div>8.分党校 打印登记表，鉴定表，结业证</div>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getSemesterDetail } from "@/api/psedu-base/semester";
  import { semeAndPsDeptOption } from "@/api/psedu-base/selectOption"
  import BarChart from "./chartView/barChart"
  export default {
    name: "trainData",
    components: {BarChart},
    data() {
      return {
        // 遮罩层
        loading: true,
        loadingDeptData: false,
        // 显示搜索条件
        showSearch: true,
        semeOptions: [],
        deptOptions: [],
        // 学期分党校表格数据
        semesterDeptList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {
          semeId: null
        },
      };
    },
    created() {
      this.getSemeAndPsDeptOption()
        .then(() => {
          console.log(this.queryParams.semeId)
          this.getSemesterDeptInfo();
        });
    },
    methods: {
      /** 查询学期信息 */
      getSemesterDeptInfo() {
        this.loadingDeptData = true;
        getSemesterDetail(this.queryParams.semeId).then(res => {
          this.semeInfo = res.data;
          this.form = res.data.semesterDept ?? {};
          this.loadingDeptData = false;
        })
      },
      getSemeAndPsDeptOption() {
        return semeAndPsDeptOption().then(res => {
          this.deptOptions = res.data.deptList;
          this.semeOptions = res.data.semeList;
          this.queryParams.deptId = this.deptOptions[0].key
          this.queryParams.semeId = this.semeOptions[0].key
          return Promise.resolve();
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          semeId: null,
          mergeClassId: null,
          managerName: null,
          managerPhone: null,
          managerQq: null,
          monitorName: null,
          monitorPhone: null,
          monitorQq: null,
          teacherName: null,
          started: null
        };
        this.resetForm("form");
      }
    }
  };
</script>

<style scoped>
  .countCard {
    text-align: center;
  }
  .countCard div:nth-child(1) {
    color: #367394;
    font-size: 30px;
  }
  .countCard div:nth-child(2) {
    font-size: 13px;
  }
  /deep/ .el-divider--horizontal {
    margin: 8px 0;
  }
  .opt-list {
    font-size: 13px;
  }
</style>
